<template>
  <n-form
		ref="formRef"
		:model="wyform"
		:rules="rules"
		label-placement="left"
		label-width="auto"
		require-mark-placement="right-hanging"
		size="small">
		<n-form-item label="作业名称" path="name" >
		 <n-input v-model:value="wyform.name" type="text" placeholder="请输入作业名称" />
		</n-form-item>
		<n-form-item label="关键词添加" path="keywords">
			<n-dynamic-tags v-model:value="wyform.keywords" />
		</n-form-item>
		<n-form-item label="作业类型" path="type">
			<n-radio-group v-model:value="wyform.type" name="type">
				<n-radio value="1">视频</n-radio>
				<n-radio value="2">音频</n-radio>
			</n-radio-group>
		</n-form-item>
		<n-form-item label="作业备注" path="remark">
			<n-input
				v-model:value="wyform.remark"
				type="textarea"
				placeholder="请输入作业备注"
			/>
		</n-form-item>
		<n-form-item>
			<n-button type="primary" @click="save">保存</n-button>
		</n-form-item>
	</n-form>
</template>

<script setup>
import { add, getInfo, update } from '@/api/homeworkApi'
const emits = defineEmits(['update:show', 'getTableData'])
const props = defineProps(['gradeId','id'])
const formRef = ref()
const value = ref(null)
const wyform = reactive({
	name: '',
	keywords: [],
	type: 1,
	remark: '',
	gradeId: props.gradeId
})
if (props.id && process.client) {
	getInfo(props.id, content => {
		wyform.id = content.id
		wyform.name = content.name
		wyform.keywords = content.keywords
		wyform.type = content.type
		wyform.remark = content.remark
		wyform.gradeId = content.gradeId
	})
}
const rules = reactive({
	name: [
		{
			required: true,
			message: '请输入作业名称',
			trigger: 'blur'
		}
	],
	keywords: [
		{
			message: '请输入关键词',
			trigger: 'blur',
			validator: (rule,value) => {
				console.dir(value)
				return value.length > 0
			}
		}
	],
	type: [
		{
			required: true,
			message: '请选择作业类型',
			trigger: 'blur'
		}
	],
	remark: [
		{
			required: true,
			message: '请输入备注信息',
			trigger: 'blur'
		}
	]
})
function save () {
	console.dir(wyform)
	const methodName = props.id ? update : add
	methodName(wyform, content => {
		emits('update:show', false)
		emits('getTableData')
	}, formRef)
}
</script>

<style scoped lang="scss">
.n-date-picker {
	width: 100%;
}
</style>